<!-- MainContent.vue -->
<template>
  <div class="flex flex-col gap-6 h-full">
    <!-- 上半：左右两个卡片 -->
    <section class="grid grid-cols-2 gap-6">
      <MetricCard title="温度" :value="temp" unit="°C" />
      <MetricCard title="湿度" :value="humi" unit="%" />
    </section>

    <!-- 下半：折线图长条 -->
    <section class="flex-1 h-64">
      <LineChart :data="chartData" />
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
// import MetricCard from '@/src/components/MetricCard.vue'
import MetricCard from './MetricCard.vue'
import LineChart from './LineChart.vue'
import { EventsOn } from "../../wailsjs/runtime/runtime"


// 模拟实时更新
const chartData = ref([])
// setInterval(() => {
//   chartData.value.push(Math.random() * 10 + 20)
//   if (chartData.value.length > 30) chartData.value.shift()
// }, 1000)

const temp = ref<number>(20)
const humi = ref<number>(50)

onMounted(() => {
  EventsOn("real_data", (data) => {
    // console.log(data)
    try {
      let data_json = JSON.parse(data)
      temp.value = data_json.t
      humi.value = data_json.h
      chartData.value.push(temp.value)
      if (chartData.value.length > 30) { chartData.value.shift() }
      console.log("-->", data_json.t | "err_t", data_json.h | "err_h")
    }
    catch (e) {
      console.log("error", e)
    }
  })
  watch(temp, (newt) => {
    console.log("temp", newt)
  })
})
</script>
